<template>
  <div>
    <lib-a-table :tableOption="tableOption" :tableColumns="tableColumns" ref="tableList">
      <template #tablePrefixSlot>
        <a-button type="primary" @click="addUser()">
          <icon-font type="icon-adduser" />
          添加用户
        </a-button>
      </template>
      <template #tags="data">
        <a-tag color="processing" v-if="data.rowData['IsActive']">启用</a-tag>
        <a-tag color="error" v-else>禁用</a-tag>
      </template>
      <template #Gender="data">
        {{ +data.rowData['Gender'] === 0 ? '男' : '女' }}
      </template>
      <template #operation="data">
        <a-button type="primary" class="small-btn mr-ms" @click="editUser(data.rowData)">编辑 </a-button>
        <a-button type="primary" class="small-btn" danger @click="deleteCurUser(data.rowData)">删除 </a-button>
      </template>
    </lib-a-table>
    <component v-if="isShowModal" :is="'LibAModal'" :title="'添加用户'" :width="700" @close-modal="closeModal">
      <template #modalContent>
        <user-edit ref="userEdit" :userId="userId" @save="isSave"></user-edit>
      </template>
      <template #footer>
        <a-button @click="closeModal(false)">
          <icon-font type="icon-cancel" />
          取 消
        </a-button>
        <a-button type="primary" @click="saveUser">
          <icon-font type="icon-save" />
          保 存
        </a-button>
      </template>
    </component>
  </div>
</template>
<script>
import LibAModal from '@/components/LibAModal/index';
import LibATable from '@/components/LibATable/index';
import UserEdit from '@/components/UserEdit/index';
import { deleteUser } from '@/api/index.js';
import { reactive, ref, defineComponent } from 'vue';
import { message } from 'ant-design-vue';

export default defineComponent({
  components: {
    LibAModal,
    LibATable,
    UserEdit,
  },
  props: {},
  setup() {
    const userEdit = ref(null);
    const isShowModal = ref(false);
    const userId = ref(null);
    const tableList = ref(null);
    const tableOption = reactive({
      url: '/api/Train/User/GetList',
      scroll: { x: 1024 },
      tableName: 'user-list',
      showExportBtn: false,
    });
    const tableColumns = reactive([
      {
        title: '用户名',
        dataIndex: 'UserName',
        width: '100px',
        fixed: 'left',
        slot: 'link', // 注意这个是name1，与templates中的slot对应
      },
      {
        title: '登录账号',
        dataIndex: 'Account',
        width: '120px',
      },
      {
        title: '性别',
        dataIndex: 'Gender',
        width: '100px',
        slot: 'custom',
      },
      {
        title: '是否启用',
        dataIndex: 'IsActive',
        width: '100px',
        slot: 'tags',
      },
      {
        title: '备注',
        dataIndex: 'Remark',
        width: '150px',
        ellipsis: true,
      },
      {
        title: '创建时间',
        dataIndex: 'CreateTime',
        width: '100px',
        slot: 'date',
      },
      {
        title: '操作',
        width: '100px',
        fixed: 'right',
        slot: 'operation',
      },
    ]);

    const closeModal = (data) => {
      isShowModal.value = data;
    };

    const addUser = () => {
      userId.value = '';
      isShowModal.value = true;
    };

    const isSave = (value) => {
      if (value) {
        isShowModal.value = false;
        tableList.value.refresh();
      }
    };

    const saveUser = async () => {
      await userEdit.value.save();
    };

    const editUser = (rowData) => {
      userId.value = rowData.Id;
      isShowModal.value = true;
    };

    const deleteCurUser = (rowData) => {
      deleteUser(rowData.Id).then(() => {
        message.success('删除成功！');
        tableList.value.refresh();
      });
    };

    return {
      tableOption,
      tableColumns,
      isShowModal,
      userEdit,
      tableList,
      userId,
      isSave,
      closeModal,
      saveUser,
      addUser,
      deleteCurUser,
      editUser,
    };
  },
});
</script>
<style lang="less" scoped>
.small-btn {
  padding: 4px 8px !important;
}
</style>
